<template>
  <BaseMainSlot>
    <template v-slot:dialogbar>
      <ActionBar :has-add="false" :has-del="false" :has-edit="false" :has-cancel="false" :has-save="false" />
    </template>
    <template v-slot:content>

      <!-- <div class="tree"> -->
      <el-tree ref="tree" :props="treerule" :data="treeData" show-checkbox node-key="functionPermissionId" accordion
        :check-strictly="true" :default-checked-keys="defaultchecklist" @node-click="handleEdit" @check="handleSionChange"
        @check-change="handleSelectionChange" />
    </template>
  </BaseMainSlot>
</template>

<script>
import UserApi from "@/api/system-settings/user-manage"
import ActionBar from "@/components/ActionBar/index.vue";
import BaseMainSlot from "@/components/BaseMainSlot/dialog.vue"
import { mymixin } from "@/utils/mixins"

export default {
  components: { BaseMainSlot, ActionBar },
  mixins: [mymixin],
  props: {
    userId: {
      type: Number,
      default: ''
    },
    userstu: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      treerule: {
        children: "childList",
        label: "funcName"
      },
      treeData: [],
      defaultchecklist: [],
      functionPermissionIdList: [],
      saveActive: false,
      cancelActive: false
    }
  },
  watch: {
    userstu: {
      handler (Val) {
        if (Val === 'add') {
          this.save()
        }
      }
    },
    userId: {
      handler (Val) {
        console.log(Val);
      }
    },
  },
  mounted () {
    this.getdatamet()
  },
  methods: {
    getdatamet () {
      UserApi.getLoginUser().then(res => {
        // console.log('---当前登陆用户可分配权限列表---',res);
        this.treeData = res.data.functionPermissionMap.WEB || []
        this.getfuncauth()
      })
    },
    // 获取选中用户所拥有的权限,并默认勾选上 
    getfuncauth () {
      this.defaultchecklist = []
      // console.log(this.userId)
      UserApi.queryUserFuncList({ userId: this.userId }).then(res => {
        // console.log('---选中用户已拥有权限列表---',res);
        let PermissionList = res.data
        let that = this
        that.$nextTick(
          () => {
            that.$refs.tree.setCheckedNodes([])
          }
        )
        PermissionList.forEach(item => {
          that.$nextTick(
            () => {
              // 设置某个节点
              that.$refs.tree.setChecked(item.functionPermissionId, true)
            }
          )
        });
      })
    },
    handleEdit (row) {
      // console.log(row)
    },
    handleSionChange () {
      this.saveActive = true
      this.cancelActive = true
    },
    handleSelectionChange () {
      let list = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys());
      // console.log(list)
      this.functionPermissionIdList = list
    },
    // 取消
    cancel () {
      this.canInput = false;
      this.addActive = false;
      this.delActive = false;
      this.saveActive = false;
      this.cancelActive = false;
      this.editActive = false;
    },
    save () {
      let params = { userId: this.userId, funcIdList: this.functionPermissionIdList }
      UserApi.addFunctionList(params).then(res => {
        if (res.success === true) {
          this.$message.success(res.message || "修改成功！");
          this.$emit('roles', '')
          this.cancel()
        } else {
          this.$message.error(res.message || "修改失败！");
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";

.tree {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  padding-right: 30px;
}

::v-deep .el-tree {
  height: 100%;
  width: 100%;

  .el-tree-node {
    margin: 0;
    // margin-bottom: 10px;
  }
}

::v-deep .common-layout {
  padding: 0 !important;

  // height: calc(100% - 5px) !important;
  .dialogcontent {
    height: 100% !important;
    margin: 0 !important;
  }
}

.action-bar {
  background-color: #00485a;
}
</style>
